/**
 * 区划标签图层 通过marker实现  自定义divIcon
 */
import up from "../../css/regionlable/up.gif";
import down from "../../css/regionlable/down.gif";
import sgisRegionBase from "../../sgis.region.base";
import hlLayer from "../../lib/systemlayers/hl.layer.js";
import sgisMapBase from "../../sgis.map.base";
export default {
  regionLableLayer: null,
  /**
   * 初始化标签图层
   * @param {Object} map 地图对象
   */
  initRegionLableLayer(map) {
    if (this.regionLableLayer === null) {
      this.regionLableLayer = L.layerGroup().addTo(map);
    }
    this.regionLableLayer.clearLayers();
  },
  /**
   * 添加区划标签到地图
   * @param {Array} datas 区划信息
   * [{ "id": "", "regioncode": "", "regionname": "", "regionlevel":"","regiontype":"","rname":"区划所在的面数据集","pname":"区划所在的点数据集","lon": "", "lat": "" } ...]
   * @param {Object} map 地图对象
   */
  createLayer(datas, map) {
    // 初始化一下regionLableLayer
    this.initRegionLableLayer(map);
    // 添加区划标签
    this.addLables(datas);
  },
  showLayer(map) {
    this.regionLableLayer.addTo(map);
  },
  hideLayer() {
    this.regionLableLayer.remove();
  },
  cleanLables() {
    if (this.regionLableLayer !== null) {
      this.regionLableLayer.clearLayers();
    }
  },
  /**
   *
   * @param {Arrays} datas 区划数据
   * [{ "id": "", "regioncode": "", "regionname": "", "regionlevel":"","regiontype":"","rname":"","pname":"","lon": "", "lat": "" } ...]
   */
  refreshRegion(datas) {
    // 清除原有的区划标签
    this.cleanLables();
    // 添加新区划标签
    this.addLables(datas);
  },
  /**
   *  构造区划标签
   * @param {Array} datas 区划数据
   * [{ "id": "", "regioncode": "", "regionname": "", "regionlevel":"","regiontype":"","rname":"","pname":"","lon": "", "lat": "" } ...]
   */
  addLables(datas) {
    for (let i = 0; i < datas.length; i++) {
      // 区划信息
      let dataTemp = datas[i];
      // 添加marker
      let regionLable = L.marker([dataTemp.lat, dataTemp.lon], {
        icon: L.divIcon({
          className: "my-custom-pin",
          iconAnchor: [0, 24],
          labelAnchor: [-6, 0],
          popupAnchor: [0, -36],
          html: this.getIconHtml(dataTemp)
        })
      });
      this.regionLableLayer.addLayer(regionLable);
    }
    let _this = this;
    // 事件绑定
    $("img.labelpre").unbind("click");
    $("div.labelName").unbind("click");
    $("img.labelnext").unbind("click");
    // 为下钻添加
    $("img.labelnext").bind("click", function() {
      let code = $(this).attr("code");
      let level = $(this).attr("level");
      let rcid = $(this).attr("rcid");
      // bounray 面数据集，用来显示当前选中的区划的边界信息
      let bRName = $(this).attr("rname");
      let bPName = $(this).attr("pname");
      let bRegiontype = $(this).attr("regiontype");
      // 查询下级区划代码信息(后台查询)
      let nextRegions = []; //  查询结果
      let nDatas = []; // 查询结果格式化
      if (nDatas.length < 1) {
        // 如果没有获取到上级区划，则不切换
        console.log("获取下级区划信息失败");
        return;
      } else {
        // 刷新标签图层
        _this.refreshRegion(nDatas);
        // 刷新区划边界
        let boundaryRegion = {
          id: code,
          regioncode: code,
          regionname: name,
          regiontype: bRegiontype + "",
          regionlevel: parseInt(level),
          lat: "",
          lon: "",
          rname: bRName,
          pname: bPName
        };
        hlLayer.addHLBoundary(
          [boundaryRegion],
          bRegiontype,
          sgisMapBase.getMap()
        );
      }
    });
    // 为上卷添加事件
    $("img.labelpre").bind("click", function() {
      let code = $(this).attr("code");
      let level = $(this).attr("level");
      let rcid = $(this).attr("rcid");
      // 后台查询上级区划信息 不走iserver空间查询，因为存在特色区划和高新区区划代码不符合规则
      // 查询上级区划代码信息(后台查询) regionlevel + 2
      let preRegions = []; // 查询结果
      let nDatas = []; // 查询结果格式化
      let regiontype = nDatas.regiontype;
      if (nDatas.length < 1) {
        // 如果没有获取到上级区划，则不切换
        console.log("获取上级区划信息失败");
        return;
      } else {
        // 刷新标签图层
        _this.refreshRegion(nDatas);
        // 刷新区划边界
        hlLayer.addHLBoundary(nDatas, regiontype, sgisMapBase.getMap());
      }
    });
    // 添加lable事件
    $("div.labelName").bind("click", function() {
      // 暂时没用到
    });
    // todo  根据区划等级判断上卷下钻按钮的显示
  },
  /**
   * 自定义标签html
   * @param {Object} dataTemp 区划信息
   * { "id": "", "regioncode": "", "regionname": "", "regionlevel":"","regiontype":"","rname":"","pname":"","lon": "", "lat": "" }
   */
  getIconHtml(dataTemp) {
    // 当前用户显示的最大行政区划级别
    let maxLevel = parseInt(sgisRegionBase.regionInfos.getMaxLevel());
    let level = parseInt(
      sgisRegionBase.regionUtils.getRegionLevel(dataTemp.regioncode)
    );

    // 根据区划等级显示上卷 下钻按钮
    let preDisplay = "";
    let nextDisplay = "";
    if (level <= maxLevel) {
      preDisplay = "display:none;"; // 不显示上钻
    } else if (level >= 6) {
      nextDisplay = "display:none;"; // 不显示下钻
    }
    // marker lable样式
    return (
      '<div id="' +
      dataTemp.regioncode +
      '_label" style="cursor:hand;">' +
      '<table class="cunLabel" style="border-collapse: collapse;">' +
      '<tbody><tr style="background-color: dodgerblue;height:8px;">' +
      '<td height="14px">' +
      '<img src="' +
      up +
      '" code="' +
      dataTemp.regioncode +
      '" name="' +
      dataTemp.regionname +
      '"  rcid="' +
      dataTemp.rcid +
      '"  level="' +
      dataTemp.regionlevel +
      '" regiontype="' +
      dataTemp.regiontype +
      '" rname="' +
      dataTemp.rname +
      '" pname="' +
      dataTemp.pname +
      '" style="height:12px;width:12px;' +
      preDisplay +
      ';" class="labelpre"></td>' +
      '<td height="14px"><div class="labelName" code="' +
      dataTemp.regioncode +
      '" name="' +
      dataTemp.regionname +
      '"  level="' +
      dataTemp.regionlevel +
      '" regiontype="' +
      dataTemp.regiontype +
      '" rname="' +
      dataTemp.rname +
      '" pname="' +
      dataTemp.pname +
      '" style="font-size:12px;color:white;white-space:nowrap;position:relative;top:-2px;">' +
      dataTemp.regionname +
      "</div></td>" +
      '<td height="14px"><img src="' +
      down +
      '" code="' +
      dataTemp.regioncode +
      '" code="' +
      '" name="' +
      dataTemp.regionname +
      '"  level="' +
      dataTemp.regionlevel +
      '" regiontype="' +
      dataTemp.regiontype +
      '" rname="' +
      dataTemp.rname +
      '" pname="' +
      dataTemp.pname +
      '" style="height:12px;width:12px;' +
      nextDisplay +
      '" class="labelnext"></td>' +
      "</tr></tbody></table></div>"
    );
  }
};
